<template>
  <SearchForm :formData="searchFormData" @searchFormReset="searchFormReset" @search="search"></SearchForm>

  <div class="newBox">
    <button class="bt wt-120" @click="openAddDialog()">新增护理项目</button>
  </div>

  <TableList :data="data" :pagination="pagination" :total="total" @pageSizeChange="onPageSizeChange"
    @pageNumChange="onCurrentChange" @openEditDialog="openEditDialog" @openOperateDialog="openOperateDialog"
    @forbidden="forbidden" @enable="enable">
  </TableList>

  <DialogForm ref="dialogFormRef" :formVisible="dialogFormVisible" :title="dialogFormTitle" :data="dialogFormData"
    @dialogClose="dialogClose" @dialogSave="dialogSave"></DialogForm>
  <OperateDialog :operateDialogvisible="operateDialogvisible" :operateDialogHeader="operateDialogHeader"
    :operateDialogBody="operateDialogBody" @onConfirm="onConfirm" @onclose="onclose"></OperateDialog>

</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next'
import { getProjectList, projectAdd, getProjectDetails, projectUpdate, projectDelete, projectStatus } from '@/api/serve'
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import OperateDialog from "./components/OperateDialog.vue";

const operateDialogvisible = ref(false);
const operateDialogHeader = ref('');
const operateDialogBody = ref('');

let row = null;
let opType = null;

const openOperateDialog = (r) => {
  operateDialogvisible.value = true;
  operateDialogHeader.value = '确认删除';
  operateDialogBody.value = '确认要删除吗？'
  row = r;
  opType = -1;
}

const forbidden = (r) => {
  operateDialogvisible.value = true;
  operateDialogHeader.value = '确认禁用';
  operateDialogBody.value = '确认要禁用吗？'
  row = r;
  opType = 1;
}

const enable = (r) => {
  operateDialogvisible.value = true;
  operateDialogHeader.value = '确认启用';
  operateDialogBody.value = '确认要启用吗？'
  row = r;
  opType = 0;
}


const onConfirm = async () => {
  let res = null;
  if (!row.id) {
    MessagePlugin.error('id不存在');
    return;
  }
  if (opType == -1) {
    res = await projectDelete(row.id);
  } else if (opType == 1) {
    res = await projectStatus({ id: row.id, status: 0 });
  } else if (opType == 0) {
    res = await projectStatus({ id: row.id, status: 1 });
  }

  if (res.code == 200) {
    // 成功
    MessagePlugin.success('操作成功');
    // 刷新页面
    query();
    // 关闭dialog
    operateDialogvisible.value = false;

  } else {
    MessagePlugin.error(res.msg);
  }

}

const onclose = () => {

}


const data = ref([]);

const total = ref(0)

const pagination = ref({
  pageNum: 1,
  pageSize: 10
});

const searchFormData = ref({ name: '', status: '' })

const onPageSizeChange = () => {
  query();
}

const onCurrentChange = () => {
  query();
}
onMounted(() => {
  query();
})

const query = async () => {
  const param = {
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
    name: searchFormData.value.name,
    status: searchFormData.value.status
  }
  const res = await getProjectList(param);
  if (res.code == 200) {
    data.value = res.data.records;
    total.value = res.data.total;
  }
}

const searchFormReset = () => {
  searchFormData.value = { name: '', status: '' }
  query();
}

const search = () => {
  query();
}



//dialog
const dialogFormVisible = ref(false)
const dialogFormTitle = ref('');
const dialogFormData = ref({
  name: '',
  price: '',
  unit: '',
  orderNo: '',
  status: '',
  image: '',
  nursingRequirement: ''
})
const openAddDialog = () => {
  dialogFormVisible.value = true
  dialogFormTitle.value = '新增'
}
const openEditDialog = async (row) => {
  // console.log(row)
  // 回显查询
  const res = await getProjectDetails(row.id);
  if (res.code == 200) {
    dialogFormVisible.value = true
    dialogFormTitle.value = '修改'
    dialogFormData.value = res.data;
  } else {
    MessagePlugin.error(res.msg);
  }
}
const dialogClose = () => {
  dialogFormVisible.value = false
  dialogFormData.value = {
    name: '',
    price: '',
    unit: '',
    orderNo: '',
    status: '',
    image: '',
    nursingRequirement: ''
  }
}
const dialogFormRef = ref(null)
const dialogSave = async (data) => {
  const res = null;
  if (data.id) {
    res = await projectUpdate(data);
  } else {
    res = await projectAdd(data);
  }

  if (res.code == 200) {
    // 成功
    MessagePlugin.success('操作成功');
    // 刷新页面
    query();
    // 关闭dialog
    dialogClose();
    // 调用子组件的方法
    dialogFormRef.value.onClickCloseBtn();
  } else {
    MessagePlugin.error(res.msg);
  }
}
</script>